<template id="template">
    <style>
        /* Add some styles here */
        * {
            padding: 0;
            margin: 0;
        }

        .badge {
            border-radius: 15px;
            background-color: lightcoral;
            color: white;
            text-align: center;
            display: inline-block;
            padding: 5px
        }

        h1, h2 {
            padding: 2px;
        }

        .content {
            background-color: white;
            width: 500px;
            height: 200px;
            margin-bottom: 20px;
            font-size: 60px;
            color: black;
            font-family: cursive;
        }
    </style>
    <!-- Add HTML for your component here.
    Try adding <content></content> to project from the light DOM -->
    <section class="badge">
        <h1>Hello</h1>
        <h2>My name is:</h2>
        <div class="content">
            <h3><content></content></h3>
        </div>
    </section>
</template>
<script>
    var createElement = function(tagName, templateId, basePrototype) {
        basePrototype = basePrototype || HTMLElement.prototype;
        var template = document.currentScript.ownerDocument.getElementById(templateId).content;
        var customElementPrototype = Object.create(basePrototype);
        customElementPrototype.createdCallback = function() {
            var shadowRoot = this.createShadowRoot();
            var clone = document.importNode(template, true);
            shadowRoot.appendChild(clone);
        };
        return document.registerElement(tagName, {
            prototype: customElementPrototype
        });
    };
    // Initialize your component here with the above function!
    createElement('my-badge', 'template');
</script>